<template>
  <view>
    <uni-nav-bar title="邀请好友" left-icon="left" @clickLeft="navBack" :fixed="true" statusBar></uni-nav-bar>
    <view class="share" style="height:94vh">
      <image :src="shareImg" style="width:100%;height:94vh" mode="aspectFill" :show-menu-by-longpress="true"></image>
      <view class="tips">
        <text>长按保存二维码在相册</text>
        <text>发送好友扫一扫一起加注呦!</text>
      </view>
    </view>
    <webWechat :path="path" :title="text"></webWechat>
  </view>
</template>

<script setup lang="ts">
import { InviteTeam } from '@/gql/team';
import { navBack } from '@/utils/navigator';
import { getDriverID } from '@/stores/driverID';
import { showLoading } from '@/utils/prompt';
import webWechat from '@c/pobulic/webWechat.vue';
import { toPublish } from '@mqtt';
import { onLoad } from '@dcloudio/uni-app';
import { ref } from 'vue';
// static
const driver_id = getDriverID();
const shareImg = ref('');
const team_id = ref('');
const type = ref('');
const path = ref('');
const text = ref('加入车友团 越团越优惠');
onLoad((pearm) => {
  team_id.value = pearm.id;
  type.value = pearm.type;
  path.value = `https://wx.anlan.tech/#/?type=${pearm.type}&from_driver_id=${driver_id}&team_id=${pearm.id}`;
  init();
});
/**
 * 分享页面图片
 */
function init() {
  showLoading('加载中');
  const payload = {
    query: InviteTeam,
    variables: { driver_id, team_id: Number(team_id.value) },
  };
  toPublish('ql/team/inviteDriver', payload, (obj: any) => {
    const { data } = obj;
    shareImg.value = data.get_yq_image.image;
  });
}
</script>

<style scoped lang="less">
.share {
  width: 100%;
  height: 94vh;
  position: relative;
  .tips {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: absolute;
    left: 0px;
    bottom: 2vh;
    text {
      font-size: 36rpx;
      color: white;
      letter-spacing: 2rpx;
    }
  }
  .bot {
    position: absolute;
    left: 25%;
    bottom: 2vh;
    width: 50%;
    height: 80rpx;
    background: #fff;
    border-radius: 5px;
    text-align: center;
    line-height: 80rpx;
    font-size: 36rpx;
    font-weight: 400;
    color: #1b91ff;
  }
}
</style>
